<template>
  <div align="center" id="esButton" style="height: 980px;margin-top: -100px" v-loading="loading">
<!--    <iframe src="public/static/overwatch/index.html"></iframe>-->
    <div style="padding-top: 400px">
      <a class="yam-don-button btn-sponsor-blue" target="_blank" @click="handleEsSave">
        <span class="yam-don-heart"><icon class="el-icon-upload"></icon></span>ES全量同步
      </a>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "esSave",
  data(){
    return{
      loading:false,
      msg: "ES全量同步",
      id: null,
    }
  },
  methods: {
    handleEsSave(){
      this.loading=true
      axios.post("http://localhost:8200/sys/es/save").then(res=>{
        if (res.data.code==200){
          this.$message({
            message: res.data.msg,
            type: 'success'
          });
        }else{
          this.$message({
            message: res.data.msg,
            type: 'error'
          });
        }
        this.loading=false;
      })
    }
  },
}
</script>

<style type="text/css">
#esButton{
  background-color: #808080;
  width: 100%;
}
.yam-don-button {
  width: 300px;
  margin-top: 100px!important;
}
.yam-don-button {
  position: relative;
  display: block;
  background: #fff;
  border: none;
  border-radius: 100px;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.5);
  margin: 15px auto 0;
  min-width: 250px;
  line-height: 60px;
  font-size: 24px;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  white-space: wrap;
  z-index: 2;
  cursor: pointer;
}
.yam-don-heart {
  position: relative;
  vertical-align: top;
  z-index: 1;
  display: inline-block;
  margin-right: 15px;
  color: #fff;
  font-size: 33px;
  text-shadow: none;
}
.btn-sponsor-red .yam-don-heart:before {
  background: linear-gradient(90deg,#f36,#61c2f0, #f441a5,#ffeb3b,#f36);
  background-size: 500%;
  content: "";
  position: absolute;
  top: 15px;
  left: -3px;
  right: 0;
  bottom: 15px;
  z-index: -1;
  filter: blur(10px);
  animation: crayonAnimate 28s linear infinite;
}
.yam-don-button:before {
  display: block;
  background: linear-gradient(90deg,#f36,#61c2f0,#f441a5,#ffeb3b,#f36);
  background-size: 500%;
  border-radius: 100px;
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  z-index: -1;
  opacity: .8;
  filter: blur(10px);
  animation: crayonAnimate 28s linear infinite;
  transition: all .35s;
}
.btn-sponsor-blue:before {
  background: linear-gradient(90deg, #ff0000, #001dff, #ff9300, #13ff00,#00a2e4);
  background-size: 500%;
}
.yam-don-button:hover:before {
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  opacity: 1;
  animation: crayonAnimate 8s linear infinite;
}
@keyframes crayonAnimate {
  from {background-position:0}
  to {background-position:500%}
}
</style>
